<!--
 * @Author: your name
 * @Date: 2020-12-28 11:54:40
 * @LastEditTime: 2020-12-30 20:17:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第三阶段 Vue + node\DAY 7\panda\src\components\nav-bar\index.vue
-->
<template>
<div id="NavBar">
  <van-nav-bar
    right-text="按钮"
    left-arrow
    @click-left="back"
  >
    <template #title>
      <div v-if="current.isSearch">
        <van-search placeholder="请输入搜索关键词" shape="round" />
      </div>
      <div v-else>
        {{current.title}}
      </div>
    </template>
  </van-nav-bar>
</div>
</template>

<script>
export default {
  name: 'NavBar',
  data() {
    return {
      current: {}
    }
  },
  watch: {
    $route: {
      handler(v) {
        const { title, isSearch } = v.meta
        this.current = {
          title,
          isSearch
        }
      },
      immediate: true
    }
  },
  methods: {
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
